import { Button } from 'antd';
import Color from 'color';
import { CSSProperties } from 'react';

import { useThemeToken } from '@/theme/hooks';

import { HEADER_HEIGHT } from './config';

type Props = {
  className?: string;
  offsetTop?: boolean;
};
export default function ConsoleHeader({ className = '', offsetTop = false }: Props) {
  const { colorBgElevated, colorBorder } = useThemeToken();

  const headerStyle: CSSProperties = {
    position: 'fixed',
    borderBottom: `1px dashed ${Color(colorBorder).alpha(0.6).toString()}`,
    // backgroundColor: Color(colorBgElevated).alpha(1).toString(),
  };
  return (
    <header className={`z-20 w-full ${className}`} style={headerStyle}>
      <div
        className="flex items-center justify-between px-4 text-gray backdrop-blur xl:px-6 2xl:px-10"
        style={{
          height: HEADER_HEIGHT,
          transition: 'height 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
        }}
      >
        <div className="flex items-baseline">
          <div className="ml-4 cursor-pointer md:block">首页</div>
          <div className="ml-4 cursor-pointer md:block">交易市场</div>
          <div className="ml-4 cursor-pointer md:block">我是供方</div>
          <div className="ml-4 cursor-pointer md:block">我是需方</div>
        </div>
        <div className="flex items-center">
          <div />
          <Button type="primary">联系我们</Button>
          <div className="ml-4 cursor-pointer md:block">注册</div>
        </div>
      </div>
    </header>
  );
}
